<template>
    <div class="huodong_all">
        <ul>
            <!-- <li>
                <a href="">
                <div class="huodong_list">

                    <div class="huodong_img"></div>
                    <div class="huodong_text">活动活动活动活动活动活动</div>
                </div>
                </a>

            </li> -->

            <li v-for="(item, index) in huoodongText" :key="index">
                <a href="">
                    <div class="huodong_list">
                        <div class="huodong_img">
                            <!-- <img :src="item" alt=""> -->
                            <img :src="(myIngs[index])" alt="">
                        </div>
                        <div class="huodong_text">{{ huoodongText[index] }}</div>
                    </div>
                </a>
            </li>
            没有更多
        </ul>
    </div>
</template>

<style lang="less" scoped>
.huodong_all {
    height: 100vh;
    overflow: scroll;

    ul {
        display: block;
        margin-bottom: 20vh;

        li {
            display: block;
            width: 90vw;
            margin: 5vw;
            background-color: aliceblue;
            border: 1px saddlebrown solid;
            border-radius: 10px;

            .huodong_list {
                height: 18vh;
                width: 90vw;
                overflow: hidden;
                width: auto;

                .huodong_img {
                    width: 100%;
                    height: 100px;
                    background-image: url(../img/huodong1.jpg);
                    object-fit: cover;
                    background-size: cover;
                }

                .huodong_text {
                    background-color: rgb(250, 246, 243);
                    font-weight: bold;
                    font-size: 12px;
                    text-align: left;
                    font-family: '楷体';
                    margin-left: 10px;
                    letter-spacing: 2px;
                    color: rgb(68, 10, 0);
                }
            }
        }
    }
}
</style>

<script>
import imgs from "../api/img.json";

import madrList from "../api/myindex";
export default {
    data() {
        return {
            arr: [],
            myIngs: imgs.img1,
            huoodongText: [
                '为梦征文，努力奋斗',
                '如果你有才华，如果你够胆量，不妨来战。为梦征文，努力奋斗',
                '爱自己，爱生活',
                '妙笔生花，笔扫千军',
                '少年征文大赛',
                '强国复兴'
            ],
        }
    },
    created() {
        console.log(imgs.img1);
    },
    methods: {
        async getmydata2() {
            try {
                // 调用接口
                const response = await madrList({
                });
                // 请求成功
                console.log("请求成功！");
                if (response) {
                    console.log(response);

                }
            } catch (err) {
                // 请求失败
                console.log("请求失败,请刷新", err);
            }
        }
    },
     // 自定义指令 
      directives: {
        // v-load 指令 (做加载图片的提示)
        load(el, binding) {
            // 创建图片实例
            const image = new Image();
            let src = binding.value;//真实图片路径 （这个图片是服务器资源）
            image.src = src;
            // 监听图片加载加载
            image.onload = () => {
                // console.log("加载图片完成");
                // 等图片资源请求 并加载完成 再渲染图片
                el.src = src;
            }
        }
    }
}

</script>